<template>

    <el-form :inline="true" :model="Search_form" label-width="auto" style="max-width: 600px">
        <el-form-item label="标题">
            <el-input v-model="Search_form.PayTitle" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="付款日期">
            <el-date-picker v-model="Search_form.PayDate" type="date" placeholder="请选择付款日期" clearable
                style="width: 200px;" />
        </el-form-item>
        <el-form-item label="审批状态">
            <el-select v-model="Search_form.AuditStatus" placeholder="请选择审批状态" clearable style="width: 200px;">
                <el-option label="请选择" :value="0" />
                <el-option label="待提交" :value="1" />
                <el-option label="待审批" :value="2" />
                <el-option label="已通过" :value="3" />
                <el-option label="已拒绝" :value="4" />
            </el-select>
        </el-form-item>
        <el-form-item label="审批人">
            <el-select v-model="Search_form.Approver" placeholder="请选择审批人" clearable style="width: 200px;">
                <el-option label="请选择" value="请选择" />
                <el-option label="牛骞若" value="牛骞若" />
                <el-option label="孟盘龙" value="孟盘龙" />
                <el-option label="于晋哲" value="于晋哲" />
                <el-option label="赵思彤" value="赵思彤" />
                <el-option label="赵秋实" value="赵秋实" />
                <el-option label="刘永刚" value="刘永刚" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="GetTableData()">查询</el-button>
            <el-button type="primary" @click="onSubmit()">添加</el-button>
            <el-button type="danger" @click="Delete()">刪除</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="TableData" style="width: 100%" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="payTitle" label="标题" width="180" align="left" />
        <el-table-column prop="purposeDescription" label="用途描述" width="180" align="left" />
        <el-table-column label="付款金额" width="180" align="right">
            <template #default="scope">
                <span style="color: red;">{{ scope.row.paymentAmount.toFixed(2) }}￥</span>
            </template>
        </el-table-column>
        <el-table-column prop="payType" label="付款方式" width="180" align="left" />
        <el-table-column prop="payment" label="支付对象" width="180" align="left" />
        <el-table-column prop="openingBank" label="开户行" width="180" align="left" />
        <el-table-column prop="bankAccount" label="银行账号" width="180" align="right" />
        <el-table-column prop="proposer" label="申请人" width="180" align="left" />
        <el-table-column prop="payDate" label="付款日期" width="180" align="left" />
        <el-table-column label="备注" width="180" align="left">
            <template #default="scope">
                <el-tag v-if="scope.row.remark == null">--</el-tag>
                <el-tag v-else>{{ scope.row.remark }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" align="left" />
        <el-table-column label="审批状态" width="180" align="left">
            <template #default="scope">
                <el-tag v-if="scope.row.auditStatus === 1" type="success">待提交</el-tag>
                <el-tag v-else-if="scope.row.auditStatus === 2" type="danger">待审批</el-tag>
                <el-tag v-else-if="scope.row.auditStatus === 3" type="danger">已通过</el-tag>
                <el-tag v-else-if="scope.row.auditStatus === 4" type="danger">已拒绝</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="approver" label="审批人" width="180" />
        <!-- <el-table-column label="操作" width="180" align="left">
            <template #default="scope">

            </template>
        </el-table-column> -->
    </el-table>

    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="Search_form.PageIndex" v-model:page-size="Search_form.PageSize"
            :page-sizes="[15, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
            :total="Page_form.TotalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>



</template>

<script setup lang="ts">
import axios from '../../../api/http'
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus';
const router = useRouter()
const route = useRoute()

const Search_form = reactive({
    PayTitle: '',
    PayDate: '',
    AuditStatus: 0,
    Approver: '请选择',
    PageIndex: 1,
    PageSize: 15,
})
const Page_form = reactive({
    TotalCount: 0,
    PageCount: 0
})


//添加
const onSubmit = () => {
    router.push({
        path: '/paymanageAdd'
    })
}

//显示
const TableData = ref([])
const GetTableData = () => {
    axios.post('/setpath/api/PayManage/GetPayManage', Search_form).then(res => {
        console.log(res)
        TableData.value = res.data
        Page_form.TotalCount = res.totalCount
        Page_form.PageCount = res.pageCount
    }).catch(err => {
        console.log(err)
    })
}

//多选
const ids = ref([])
const check = ref([])
const handleSelectionChange = (val: []) => {
    ids.value = []
    check.value = val
    check.value.forEach((item: any) => {
        ids.value.push(item.payID)
    })
}
//分页
const handleSizeChange = (val: number) => {
    Search_form.PageSize = val
    GetTableData()
}
const handleCurrentChange = (val: number) => {
    Search_form.PageIndex = val
    GetTableData()
}
//刪除
const Delete = () => {
    if (ids.value.length == 0) {
        ElMessage({
            message: '请选择要删除的数据',
            type: 'warning',
        })
        return
    }
    ElMessageBox.confirm(
        '确定要删除所选数据吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post('/setpath/api/PayManage/DeletePayManage?ids=' + ids.value).then(res => {
                if (res > 0) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    GetTableData()
                }
                else {
                    ElMessage({
                        type: 'warning',
                        message: '删除失败',
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })
}

//生命周期
onMounted(() => {
    GetTableData()
})
</script>